import React from 'react'
import { useSelector} from 'react-redux'
import { selectAll } from '../../store/actions/todo'
import TodoItem from '../TodoItem'


export default function TodoMain() {
  const list = useSelector((state) => state.todo)
  // !确定全选的状态，根据所有的单选的状态来确定
  const isCheckAll = list.every((item) => item.done)
  // !全选操作
  const handleChangeAll = () => dispatch(selectAll(!isCheckAll))

  return (
    <section className='main'>
      <input id='toggle-all' 
      className='toggle-all'
       type='checkbox' 
       checked={isCheckAll}
       onChange={handleChangeAll}
       />
      <label htmlFor='toggle-all'>Mark all as complete</label>
        {/* // #2. 用 currentID 和 item.id 进行比较，如果是 true 就应用 editing class */}
      <ul className='todo-list'>
        {list.map((item) => (
         <TodoItem key={item.id} item={item}></TodoItem>
        ))}
      </ul>
    </section>
  )
}